@import 'assets/stylesheets/gutenberg-base-styles';
@import '../../mixins';

.onboarding-block__questions {
	.onboarding-block__question {
		display: flex;
		font-size: 64px;
		margin-bottom: 10px;

		.onboarding-block__active-question {
			visibility: hidden;
			height: 0;
		}

		.onboarding-block__inactive-question {
			visibility: visible;
			height: 100%;
		}

		.onboarding-block__question-answered-container[data-active=true] {
			.onboarding-block__active-question {
				visibility: visible;
				height: 100%;
			}

			.onboarding-block__inactive-question {
				visibility: hidden;
				height: 0;
			}
		}

		> span {
			white-space: nowrap;
		}

		div > input.onboarding-block__question-input {
			@include onboarding-font-recoleta;
			background: transparent;
			border: 0;
			color: var( --mainColor );
			display: inline-block;
			font-size: inherit;
			line-height: inherit;
			margin: 0 0 3px 0.2em;
			min-height: 1em;
			min-width: 60px;
			padding: 0;
			transition: color 0.5s ease-in-out 1s,
				border-color 0.5s ease-in-out 1s;

			&:hover {
				border-color: var( --highlightColor );
			}

			&:active,
			&:focus {
				padding: 0;
				border-color: var( --highlightColor );
				outline: 0; // @TODO: needs a11y considerations
			}
		}

		.onboarding-block__question-answered {
			@include onboarding-font-recoleta;
			border-bottom: 3px solid var( --mainColor );
			color: var( --mainColor );
			cursor: text;
			margin: 0 0 0 0.2em;
			min-height: 1em;
			min-width: 60px;
			transition: color 0.5s ease-in-out 1s, border-color 0.5s ease-in-out 1s;

			&:hover {
				border-color: var( --highlightColor );
			}

			&:active,
			&:focus {
				border-color:var( --highlightColor );
			}
		}
	}
}
